<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/title.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="font/iconfont.css" />
		<link rel="stylesheet" href="css/icons-extra.css" />
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	<!--App自定义的css-->
		<style>
			
			.mui-card .mui-control-content {
				padding: 10px;
			}
			.mui-slider-group .mui-control-content {
			    position: relative;
			    width: 96%;
			    height: 86%;
			    left:2%;
			}
			.mui-bar{
				background-color: #3a3f43;
				height: 50px;
			}
			.buybox{
				height: 36px;
				width: 80px;
				text-align: center;
				line-height: 36px;
				background: #000000;
				color: white;
			}
			.buy-left{
				float: left;
			}
			.buy-right{
				float: left;
			}
			.buy-active{
				background: -webkit-linear-gradient(left,#fbed21,#fab03b);
    			color: #fff;
			}
			.mui-bar-nav~.mui-content{
				padding: 0px;
			}
			.mui-content{
				margin:50px 10px 0px 10px;
			}
			body {
			    background: #1a1a1a;
			    font-size: 13px;
			}
			.mui-content{
				background: #1a1a1a;
			}
			.mui-bar-nav {
			    top: 0;
			    -webkit-box-shadow: none;
			    box-shadow: none; 
			}
			.mairu_guojia p{
			    line-height: 30px;
			    color: #fcee21;
			    margin: 0;
			    border-bottom: 1px solid #434343;
			}
			.mui-segmented-control .mui-control-item.mui-active{
				transform: translate3d(0px, 0px, 0px) translateZ(0px);
			}
			.mui-table-view-cell{
			    border-bottom: 0px dashed #505050;
			    color: white;
			}
			.mui-table-view{
				background-color: #1a1a1a;
			}
			.mui-segmented-control .mui-control-item{
				color: #b3b3b3;
				border: none;
			}
			.mui-segmented-control{
				border:none;
			}
			.mui-segmented-control .mui-control-item.mui-active{
				    color: #fcee21;
    				border-bottom: 3px solid #fcee21;
    				background: none;
			}
			.mui-table-view:before{
				background: none;
			}
			.mui-table-view-cell:after{
				background: none;
			}
			.buy-bdetail{
				width: 60%;
				float: left;
			}
			.number_right{
				width: 40%;
				float: right;
			}
			.number_right span{
				float: right;
				font-size: 11px;
				color: #ccc;
				line-height: 15px;
			}
			.credit{
				font-size: 11px;
				line-height: 12px;
				color: #ccc;
			}
			.mui-table-view-cell p{
				    color: #fff;
    				font-size: 12px;
			}
			.mui-media-body img{
				width: 16px;
			}
			.iconfont{
				font-size: 16px;
			}
			.number_right .transaction_num{
				font-size: 14px;
				line-height: 20px;
				color: #ccc;
			}
			.number_right .button{
				    border: none;
				    color: #000;
				    width: 50%;
				    text-align: center;
				    font-size: 11px;
				    height: 16px;
				    line-height: 16px;
				    background-color: #0f0;
			}
			.transaction-title{
				/*position: fixed;
				top: 50px;
				left: 0px;*/
				padding:0px 5px;
				z-index: 999;
				background: #1a1a1a;
			}
			.mui-slider-group{
				padding-top: 200px;
			}
			.mui-table-view-cell.mui-active{
				background: none;
			}
			
			.mui-pull-loading{
				color:#fff;
			}
			.mui-control-content{
				padding-bottom:20px ;
			}
			#segmentedControl1{
				display: table;
			}
		</style>
		
		<style>
			input[type=password] {
				border-radius: 0;
			}
			
			#keyboard {
				height: 230px;
				background-color: rgb(245, 245, 245);
				bottom: 0;
				width: 100%;
				padding: 0;
				position: fixed;
				z-index: 10;
				right: 0;
				left: 0;
				border-top: 1px solid #c8c7cc;
				color: #333;
			}
			
			#arrowdown {
				width: 100%;
				text-align: center;
				border-bottom: 1px solid #c8c7cc;
			}
			
			#keyboard .num {
				width: 33.15%;
				padding-top: 13px;
				padding-bottom: 14px;
				text-align: center;
				float: left;
				color: #333;
			}
			
			.payment_pwd {
				width: 36px;
				height: 36px;
				margin-left: 0;
				float: left;
				color: #333;
			}
			
			#main_content {
				width: 78%;
				height: 104px;
				margin-bottom: 80%;
				border-radius: 8px;
				margin-top: 10px;
				margin: 0 auto;
				position: fixed;
				top: 12%;
				left: 10%;
			}
			
			#main_content .mui-input-row {
				overflow: visible;
			}
			
			.payment_password {
				display: flex;
				justify-content: center;
				height: 36px;
			}
			
			.mui-pull-bottom-wrapper {
				text-align: center;
			}
			
			.mui-pull-bottom-wrapper .mui-pull-loading {
				line-height: 44px;
			}
			
			.mairu_guojia {
				position: relative;
			}
			
			.mairu_guojia a {
				display: block;
				width: 15%;
				height: 20px;
				line-height: 22px;
				border-radius: 8px;
				border: none;
				position: absolute;
				text-align: center;
				right: 10px;
				top: 5px;
				float: left;
				background: #f00;
				color: white;
			}
			
			/*银行卡信息*/
			.bankcard{margin-top:10px;background:#ddd;margin-bottom:10px;}
			.bankcard .mui-table-view{background:#ddd;padding-top:0px;}
			.bankcard .mui-table-view .mui-table-view-cell a{color:#000;margin:0px;padding:10px 0 0 0;}
			.card_info{padding:10px;}
			.card_info p{color:#333;}
			/*创建订单*/
			.creatbtn button{height:40px;line-height: 1;}
			.mairu_list.figure .mui-btn.selected{
				background-color:#006cff;
				color:#fff;
			}
			.unbank{height:70px;background:#ddd;margin-bottom:10px;}
			.unbank a{text-align: center;line-height: 70px;}				
			.unbank a p{color:#000;}	
			
			.order_top{margin:0 14px 20px 14px;height:80px;line-height:80px;justify-content:space-around;display: flex;margin-top:70px;background:#333;}
			.order_top .order_yue a{color:#fbed21;font-size:14px;font-weight: bold;}
			.order_top .order_yue a span{color:#fff;}
			.shuxian{height:auto;width:1px;background:#ddd;opacity:0.2;margin:30px 0 25px 0;}
			
			.mui-table-view:before{height:0;}
			.mui-table-view:after{height:0;}
			.fukuan{margin:0 10px; }
			.fukuan .mui-table-view-cell{display:inline-block;width:48%;text-align: center;margin-bottom:5px;margin-left:1%;background:#303f52;}
			.fukuan .mui-table-view-cell img{width:30%;}
			.fukuan .mui-table-view-cell a.mui-active{background:none;}
			
			.mui-table-view-cell>a:not(.mui-btn){padding:5px 15px;}
		</style>
	</head>
	<body>
		<!-- 头部 -->
		<header class="mui-bar mui-bar-nav home_top">
			<h1 class="mui-title"><span lang>交易中心</span></h1>
		</header>
		<!--余额、积分-->
		<div class="order_top">
			<div class="order_yue">
				<a id="yue_log" lang>
					<b lang>余额:</b><span id="yue_log_val">0.00000</span>
				</a>
			</div>
			<div class="shuxian"></div>
			<div class="order_yue">
				<a id="jifen_log" lang>
					<b lang>积分:</b><span id="jifen_log_val">0.00000</span>
				</a>
			</div>
		</div>
		<!--付款、收款、卖出、买入-->
		<ul class="mui-table-view fukuan">
			<li class="mui-table-view-cell">
				<a id="pay_money">
				<img src="img/fukuan.png" />
				<p lang>转出</p>
				</a>
			</li>
			<li class="mui-table-view-cell">
				<a id="receive_money">
				<img src="img/shoukuan.png" />
				<p lang>转入</p>
				</a>
			</li>
			<li class="mui-table-view-cell">
				<a id="sale_order">
				<img src="img/maichu.png" />
				<p lang>订单交易</p>
				</a>
			</li>
			<li class="mui-table-view-cell">
				<a id="buy_order">
					<img src="img/mairu.png" />
					<p lang>余额购买</p>
				</a>
			</li>
		</ul>
		<!--遮罩-->
		<div id="account_pwd" style="z-index:5000; background-color:#000; opacity:0.2; filter:alpha(opacity=40);position: fixed;
	    top: 0;
	    display:none;
	    left: 0;"></div>
		<div class="mui-content" id="main_content" style="z-index: 6000;background:#fff;top: 14%;position: fixed;display:none;">
			<div style="text-align: center;font-size: 16px;height:30px;color:#333;margin-top:3%;">
				<span class="mui-icon iconfont icon-guanbi" style="float:right;color:#000;margin-right:2%;" id="close_win"></span>
				<span style="width:70%;float:left;margin-left: 15%;" lang>请输入支付密码</span>
			</div>
		
			<div class="mui-input-row mui-password payment_password" style="margin-top:10px;">
				<div style="width:36px;height:36px;margin-left:2%;float:left;color:#333;">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>
			</div>
		</div>

		<div id="keyboard" style="z-index: 6000;position: fixed;display:none;">
			<div id="arrowdown">
				<span class="mui-icon mui-icon-arrowdown" style="font-size:26px;padding-top:3px;padding-bottom:3px;"></span>
			</div>
			<div>
				<div id="num1" data-num="1" class="num data_num" style="border-right:1px solid #c8c7cc;">
					<span>1</span>
				</div>
				<div id="num2" data-num="2" class="num data_num" style="border-right:1px solid #c8c7cc;">
					<span>2</span>
				</div>
				<div id="num3" data-num="3" class="num data_num" style="">
					<span>3</span>
				</div>

				<div id="num4" data-num="4" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>4</span>
				</div>
				<div id="num5" data-num="5" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>5</span>
				</div>
				<div id="num6" data-num="6" class="num data_num" style="border-top:1px solid #c8c7cc;">
					<span>6</span>
				</div>

				<div id="num7" data-num="7" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>7</span>
				</div>
				<div id="num8" data-num="8" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>8</span>
				</div>
				<div id="num9" data-num="9" class="num data_num" style="border-top:1px solid #c8c7cc;">
					<span>9</span>
				</div>

				<div class="num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;background-color:rgb(224,224,224);">
					<span>&nbsp;</span>
				</div>
				<div id="num0" data-num="0" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>0</span>
				</div>
				<div id="numC" data-num="C" class="num" style="border-top:1px solid #c8c7cc;background-color:rgb(224,224,224);padding-top: 13px;
    						padding-bottom: 5px;">
					<div><span class="mui-icon iconfont icon-weibiaoti-"></span></div>
				</div>

			</div>
		</div>
			
			
			
		<!--遮罩-->
		<div id="account_pwd" style="z-index:5000; background-color:#000; opacity:0.2; filter:alpha(opacity=40);position: fixed;
	    top: 0;
	    display:none;
	    left: 0;"></div>
		<div class="mui-content" id="main_content" style="z-index: 6000;background:#fff;top: 14%;position: fixed;display:none;">
			<div style="text-align: center;font-size: 16px;height:30px;color:#333;margin-top:3%;">
				<span class="mui-icon iconfont icon-guanbi" style="float:right;color:#000;margin-right:2%;" id="close_win"></span>
				<span style="width:70%;float:left;margin-left: 15%;" lang>请输入支付密码</span>
			</div>
		
			<div class="mui-input-row mui-password payment_password" style="margin-top:10px;">
				<div style="width:36px;height:36px;margin-left:2%;float:left;color:#333;">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>

				<div class="payment_pwd">
					<input class="" type="password" value="" style="width:100%;padding:0;text-align:center;border-left:0;" readonly="readonly">
				</div>
			</div>
		</div>

		<div id="keyboard" style="z-index: 6000;position: fixed;display:none;">
			<div id="arrowdown">
				<span class="mui-icon mui-icon-arrowdown" style="font-size:26px;padding-top:3px;padding-bottom:3px;"></span>
			</div>
			<div>
				<div id="num1" data-num="1" class="num data_num" style="border-right:1px solid #c8c7cc;">
					<span>1</span>
				</div>
				<div id="num2" data-num="2" class="num data_num" style="border-right:1px solid #c8c7cc;">
					<span>2</span>
				</div>
				<div id="num3" data-num="3" class="num data_num" style="">
					<span>3</span>
				</div>

				<div id="num4" data-num="4" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>4</span>
				</div>
				<div id="num5" data-num="5" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>5</span>
				</div>
				<div id="num6" data-num="6" class="num data_num" style="border-top:1px solid #c8c7cc;">
					<span>6</span>
				</div>

				<div id="num7" data-num="7" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>7</span>
				</div>
				<div id="num8" data-num="8" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>8</span>
				</div>
				<div id="num9" data-num="9" class="num data_num" style="border-top:1px solid #c8c7cc;">
					<span>9</span>
				</div>

				<div class="num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;background-color:rgb(224,224,224);">
					<span>&nbsp;</span>
				</div>
				<div id="num0" data-num="0" class="num data_num" style="border-right:1px solid #c8c7cc;border-top:1px solid #c8c7cc;">
					<span>0</span>
				</div>
				<div id="numC" data-num="C" class="num" style="border-top:1px solid #c8c7cc;background-color:rgb(224,224,224);padding-top: 13px;
    						padding-bottom: 5px;">
					<div><span class="mui-icon iconfont icon-weibiaoti-"></span></div>
				</div>

			</div>
		</div>
		
		
		<!--底部导航-->
		<nav class="mui-bar mui-bar-tab " id="nav" style="background-color: #fff;">  
            <a class="mui-tab-item" id="index.html">  
                <span class="mui-icon iconfont iconshouye"></span>  
                <span class="mui-tab-label" lang>首页</span>  
            </a>  
            <a class="mui-tab-item mui-active" id="transaction.html">  
                <span class="mui-icon iconfont iconjiaoyi"></span>  
                <span class="mui-tab-label" lang>交易</span>  
            </a>  
            <a class="mui-tab-item" id="mall/index_m.html">  
                <span class="mui-icon iconfont iconshangcheng"></span>  
                <span class="mui-tab-label" lang>商城</span>  
            </a>  
            <a class="mui-tab-item" id="wallet.html">  
                <span class="mui-icon iconfont iconzhifu"></span>  
                <span class="mui-tab-label" lang>钱包</span>  
            </a> 
            <a class="mui-tab-item" id="setting.html">  
                <span class="mui-icon iconfont iconzhanghu"></span>  
                <span class="mui-tab-label" lang>我的</span>  
            </a>
        </nav>  
        
		<script src="lang/index.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/config.js"></script>
		<script src="js/common.js"></script>
		<script src="js/sockjs.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script src="js/jquery-1.7.2.min.js"></script>
		<script src="resource/index/guide.js"></script>
		<script src="resource/transaction/transaction.js"></script>

	</body>

</html>
